<template>
	<view class="">
		<cu-navbar :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">搜索列表</block>
		</cu-navbar>
		<view class="cu-list menu-avatar">
			<view class="cu-item cur" v-for="(item, index) in list" :key="index" @click="testDetail(item.id)">
				<view class="cu-avatar radius xl" :style="{ backgroundImage: 'url(' + item.image + ')' }"><view class="cu-tag badge"></view></view>
				<view class="content">
					<view>
						<view class="text-cut" v-text="item.title"></view>
						<!-- <view class="cu-tag round bg-mauve sm">6人</view> -->
					</view>
					<view class="text-gray text-sm flex"><view class="text-cut" v-text="item.description"></view></view>
					<view class="flex justify-between">
						<text class="text-lg text-shadow text-mauve">￥{{ item.pay_mode==2?item.price:'免费' }}</text>
						<text class="text-gray text-shadow">{{ item.test_num }}人已测</text>
					</view>
				</view>
				<!-- <view class="action">
					<view class="text-grey text-xs">22:20</view>
					<view class="cuIcon-notice_forbid_fill text-gray"></view>
				</view> -->
			</view>
			<view class="" v-if="!list.length"><cu-empty></cu-empty></view>
		</view>
	</view>
</template>

<script>
import { test } from '@/config/mixins.js';
export default {
	mixins: [test],
	onLoad(e) {
		console.log(e);
		this.keyword = e.keyword;
		this.gettestlist();
	},
	data() {
		return {
			page: 1,
			list: [],
			is_loading: true
		};
	},
	methods: {
		openDetail(item) {},
		gettestlist() {
			this.$api
				.testlist({
					page: this.page,
					title: this.keyword
				})
				.then(res => {
					if (res.code) {
						if (res.data.current_page == res.data.last_page) {
							this.is_loading = false;
						}
						this.list = this.list.concat(res.data.data);
					}
				});
		}
	},
	onReachBottom() {
		if (this.is_loading) {
			this.page++;
			this.gettestlist();
		}
	}
};
</script>

<style>
page {
	background-color: #f4f6f8;
}
.cu-list.menu-avatar > .cu-item {
	height: 190upx;
}
.cu-list.menu-avatar > .cu-item .content {
	left: 190upx;
	width: calc(100% - 52px - 66px);
}
</style>
